<template>
  <div>
    <el-container class="home-container">
      <el-header class="home-header">
        <el-header >企业快速开发平台</el-header>
        <el-dropdown @command="handleCommand">
          <span id="loginName">{{loginname}}</span>
          <span id="userface">{{userface}}</span>
          <span></span>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>查看</el-dropdown-item>
            <el-dropdown-item @click="uppic()">上传图片</el-dropdown-item>
            <el-dropdown-item @click="logout()">注销</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>

      <el-container>
        <el-aside width="200px" class="home-aside">
          <el-menu router :unique-opened="true">
            <el-submenu
              :index="index+''"
              v-for="(item,index) in this.$router.options.routes[1].children"
            >
              <template slot="title">
                <i class="el-icon-message"></i>
                {{item.name}}
              </template>

              <el-menu-item-group>
                <!-- 循环路由里面的 -->
                <el-menu-item :index="sub.path" v-for="sub in item.children">{{sub.name}}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

   <script>
import store from "./store";
import axios from "axios";
export default {
  data() {
    return {
      loginname: "",
      userface:""
    };
  },
  mounted() {
    this.loginname = store.state.user.username;
    this.userface=store.state.user.face
  },
  methods: {
    handleCommand() {
      var wmh = this;
      //  localStorage.removeItem("user")
      //  store.commit('login','');
      //  store.commit('initMenu',[]);
      //  this.$router.replace({path:"/"})

      axios.get("http://localhost:8081/my/logout").then(function(arr) {
        console.log(arr);
        wmh.$message(arr.data.msg);
        if (arr.data.code == 200) {
          localStorage.removeItem("user");
          store.commit("login", "");
          store.commit("initMenu", []);
          wmh.$router.replace({ path: "/" });
          return;
        }
      });
    }
  }
};
</script>


    <style>
.home-container {
  height: 100%;
  position: absolute;
  background: url("./assets/zsh1.jpg");
  background-size: cover;
  opacity: 8;
  top: 0px;
  left: 0px;
  width: 100%;
}
.home-header {
  background-color: #20a0ff;
  color: #333;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: content-box;
  padding: 12px;
  background: url("./assets/zsh1.jpg");
  background-size: cover;
}
.home_title {
  color: #fff;
  font-size: 22px;
  display: inline;
  margin-left: 8px;
  background: url("./assets/zsh1.jpg");
  opacity: 8;
}
.home-aside {
  background-color: #ececec;
  background: url("./assets/zsh1.jpg");
  background-size: cover;
  opacity: 8;
}
</style>